<template>
    <div class="content">
        <van-search
            v-model="valueSearch"
            show-action
            :placeholder="defaultKeyword"
            @cancel="onCancel"
            @input="searchData"
            @search="clickSearch"
            @click="clickBlock"
        />
        <!-- 历史记录和 热门搜索 -->
        <div v-if="block == 1" v-cloak>
            <van-cell title="历史记录" icon="underway-o">
                <template #right-icon>
                    <van-icon
                        name="delete"
                        size="0.55rem"
                        class="center"
                        @click="deleteHistory"
                    />
                </template>
            </van-cell>
            <van-row class="container">
                <van-col span="20" offset="2">
                    <div class="tagTitle">
                        <van-tag
                            plain
                            type="default"
                            v-for="(item, index) in historyKeywordList"
                            :key="index"
                            size="large"
                            @click="historyTag(item)"
                        >
                            <span> {{ item }}</span>
                        </van-tag>
                    </div>
                </van-col>
            </van-row>
            <div class="borderSize"></div>
            <van-cell title="热门搜索" icon="fire-o"> </van-cell>
            <van-row class="container">
                <van-col span="20" offset="2">
                    <div class="tagTitle">
                        <van-tag
                            plain
                            type="default"
                            v-for="(item, index) in hotKeywordList"
                            :key="index"
                            size="large"
                            :text-color="item.is_hot == 1 ? 'red' : '#969799'"
                            @click="historyTag(item.keyword)"
                        >
                            <span> {{ item.keyword }}</span>
                        </van-tag>
                    </div>
                </van-col>
            </van-row>
        </div>
        <!-- 搜索内容 -->
        <div v-else-if="block == 2" v-cloak>
            <van-list :finished="true" finished-text="没有更多了">
                <van-cell
                    v-for="(item, index) in searchList"
                    :key="index"
                    :title="item"
                    @click="block2(item)"
                />
            </van-list>
            <div class="back">
                <span @click="block1">返回</span>
            </div>
        </div>
        <div v-else v-cloak>
            <van-dropdown-menu>
                <van-dropdown-item disabled v-model="value2" :options="option1" title="综合" />
                <van-dropdown-item v-model="value1" :options="option1" title="价格" />
                <van-dropdown-item v-model="value2" :options="filterCategory" title="分类" />
            </van-dropdown-menu>
            <div class="containerProduct">
                <div
                    class="ImagProduct"
                    v-for="item in goodsList"
                    :key="item.id"
                    @click="buyProduction(item.id)"
                >
                    <van-image width="100%" height="120" lazy-load :src="item.list_pic_url">
                        <template v-slot:loading>
                            <van-loading type="spinner" size="20" />
                        </template>
                    </van-image>
                    <p style="text-align: center; font-size: 14px">{{ item.name }}</p>
                    <p style="text-align: center; font-size: 14px; color: red; margin-top: 5px">
                        ￥{{ item.retail_price | price }}元
                    </p>
                </div>
            </div>
        </div>
        <van-empty
            v-show="goodsList.length == 0 && block == 3"
            v-cloak
            class="custom-image"
            image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
            description="物品走丢了"
        />
        <router-view></router-view>
    </div>
</template>
<script>
export default {
    name: 'Search',
    data() {
        return {
            valueSearch: null,
            block: 1,
            defaultKeyword: '',
            historyKeywordList: [],
            hotKeywordList: [],
            searchList: [],
            value1: -1,
            value2: 0,
            order: 'desc', // 价格由低到高
            sort: 'id',
            page: 1,
            size: 200,
            boolean: true,
            option1: [
                { text: '升序', value: 0 },
                { text: '降序', value: 1 }
            ],
            filterCategory: [], // 搜索框分类类表
            goodsList: [], // 搜索框分类类表下的图片
            focusBoolean: true
        }
    },
    watch: {
        // 监视 价格
        value1: {
            handler(newValue) {
                if (newValue == 0) {
                    this.sort = 'price'
                    this.order = 'asc'
                    this.clickSearch()
                } else if (newValue == 1) {
                    this.sort = 'price'
                    this.order = 'desc'
                    this.clickSearch()
                }
            }
        },
        // 监视 分类
        value2: {
            handler() {
                if (this.boolean) {
                    this.clickSearch()
                }
                this.boolean = true
            }
        },
        // 监视搜索框内容变化
        valueSearch: {
            handler() {
                this.order = 'desc'
                this.sort = 'id'
                this.value2 = 0
                this.boolean = false
            }
        }
    },
    methods: {
        // 购买商品
        buyProduction(id) {
            this.$store.commit('tabbar/Bottom', true)
            this.$router.push({
                name: 'SearchDetails',
                params: {
                    id: id
                }
            })
        },
        // 返回历史记录
        block1() {
            this.block = 1
            this.history()
        },
        // 获取历史记录的函数
        history() {
            this.$http
                .get('/search/index')
                .then(res => {
                    const { data } = res
                    this.errorMethods(data)
                    const { defaultKeyword, historyKeywordList, hotKeywordList } = data.data
                    this.defaultKeyword = defaultKeyword.keyword
                    this.historyKeywordList = historyKeywordList
                    this.hotKeywordList = hotKeywordList
                })
                .catch(err => {
                    console.log(err)
                })
        },
        // 删除历史记录
        deleteHistory() {
            this.$http
                .post('/search/clearhistory')
                .then(res => {
                    const { data } = res
                    this.errorMethods(data)
                    this.$dialog
                        .confirm({
                            message: '删除所有非默认历史记录'
                        })
                        .then(() => {
                            this.history()
                        })
                        .catch(() => {})
                })
                .catch(err => {
                    console.log(err)
                })
        },
        //点击搜索框显示出下拉菜单的时候
        clickBlock() {
            this.block = 2
        },
        // 点击 搜索列表触发
        block2(v) {
            this.valueSearch = v
            this.clickSearch()
        },
        // 点击历史标签触发
        historyTag(v) {
            this.valueSearch = v
            this.clickSearch()
        },
        // 点击搜索触发请求
        resClick() {
            this.$http
                .get('/goods/list', {
                    params: {
                        keyword: this.valueSearch,
                        order: this.order,
                        categoryId: this.value2,
                        sort: this.sort,
                        page: this.page,
                        size: this.size
                    }
                })
                .then(res => {
                    const { data } = res
                    this.errorMethods(data)
                    for (let i in data.data.filterCategory) {
                        data.data.filterCategory[i].text = data.data.filterCategory[i].name
                        data.data.filterCategory[i].value = data.data.filterCategory[i].id
                    }
                    this.filterCategory = data.data.filterCategory
                    this.goodsList = data.data.goodsList
                })
                .catch(err => {
                    console.log(err)
                })
        },
        // 点击搜索的时候
        clickSearch() {
            this.block = 3
            // 搜索搜索框的数据
            this.resClick()
        },
        // 取消按钮
        onCancel() {
            this.$router.replace({
                name: 'home'
            })
        },
        // 输入框内容变化的时候触发
        searchData(val) {
            this.$http
                .get('/search/helper', {
                    params: {
                        keyword: val
                    }
                })
                .then(res => {
                    const { data } = res
                    this.errorMethods(data)
                    this.searchList = data.data
                })
                .catch(err => {
                    console.log(err)
                })
        },
        //参数errno为 1时的 处理
        errorMethods(data) {
            if (data.errno != 0) {
                this.$notify({
                    type: 'danger',
                    message: data.errmsg
                })
                return
            }
        }
    },
    created() {
        this.history()
        this.$store.commit('tabbar/Bottom', false)
    },
    beforeDestroy() {
        this.$store.commit('tabbar/Bottom', true)
    }
}
</script>

<style scoped>
.content {
    width: 100%;
    min-height: 100%;
    position: absolute;
    z-index: 999;
    background-color: #efefef;
    top: 0;
}
.center {
    top: 1px;
}
.container {
    background-color: white;
}
.borderSize {
    height: 20px;
}
.van-cell {
    padding-bottom: 0;
}
span {
    font-size: 14px;
}
.tagTitle {
    width: 100%;
    height: 100%;
    display: flex;
    margin: 10px 0;
    flex-wrap: wrap;
    justify-content: space-between;
}
.van-tag {
    margin: 5px 0;
}
.back {
    text-align: center;
}
.containerProduct {
    margin-top: 12px;
    display: flex;
    width: 100%;
    flex-flow: wrap;
    justify-content: space-between;
}
.ImagProduct {
    margin: 15px;
    width: 40%;
    background-color: #fff;
}
[v-cloak] {
    display: none;
}
</style>